<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="s" uri="/struts-tags"  %>
<script type="text/javascript">
$(document).ready(function() {
	$('#addCommentForm').hide();
	loadDivListComments(<s:property value="task.id" />);
});


$("#commentForm").validate({
	submitHandler: function(form) {
		$.post('./comment/saveComment', $('#commentForm').serialize(), function(resultadoHTML) {
			$('#listOfComment').html(resultadoHTML);			
		});
		$('#addCommentForm').hide();
	}
});

function addUsers(idTask){
	$.post('./list/loadUsersTask.action', {'id':idTask}, function(respuestaHTML) {
				$('#addUserForm').html(respuestaHTML);
			});
	}	
function addComment(idTask){
	$('#addCommentForm').show();
	}	

function loadDivListComments(idTask){
	$.post('./comment/loadCommentsOfTask.action', {'idTask':idTask}, function(respuestaHTML) {
		$('#listOfComment').html(respuestaHTML);
	});
	}
</script>
<h4>
	TASK:
</h4>
<table class="table table-striped table-bordered table-condensed" >
	<tr align="center">
		<td><b>ID</b></td>
		<td><b>TASK</b></td>
		<td><b>DESCRIPTION</b></td>
		<td><b>HOURS</b></td>
		<td><b>START DATE</b></td>
		<td><b>END DATE</b></td>
		<td><b>TASK STATUS</b></td>
		<td><b>TASK TYPE</b></td>
		<td><b>OPTION</b></td>
	<tr/>
		<tr>	
			<td><s:property value="task.id" /></td>
			<td><s:property value="task.title" /></td>
			<td><s:property value="task.description" /></td>
			<td><s:property value="task.hours" /></td>
			<td><s:property value="task.period.startDate"/></td>
			<td><s:property value="task.period.endDate"/></td>
			<td><s:property value="task.taskStatus.name" /></td>
			<td><s:property value="task.taskType.name" /></td>
			<td><a class="btn btn-mini" href="#" onclick="addUsers(<s:property value="task.id" />)">Add users</a>
			<td><a class="btn btn-mini" href="#" onclick="addComment(<s:property value="task.id" />)">Add comment</a>
		<tr/>
</table>

<div id="addUserForm">
</div>

<div id="listOfComment">
</div>

<div id="addCommentForm">
	<s:form id="commentForm" action="./comment/saveComment" >
		<s:hidden name="task.id"/>
		<s:textfield cssClass="required" name="comment.description" label ="Comment"/>
		<s:submit id="botSave" align="left" value="Save"/>
	</s:form>
</div>